<template>
  <div class="tw-table" :class="{'has-total': hasTotal}">
    <table cellspacing="0">
      <thead>
        <tr v-if="!weekTh">
          <th v-for="item in tableData.thead"
              v-bind:key="item.id"
              :style="{'width':item.width ? item.width : 'auto'}">
            {{item.value ? item.value : item}}
          </th>
        </tr>
        <tr v-if="weekTh" class="weeks">
          <th v-for="item in tableData.thead"
              v-bind:key="item.id">
            {{item.split(',')[0]}}<br v-if="item.split(',').length === 2" />{{item.split(',').length === 2 ? item.split(',')[1] : '' }}
          </th>
        </tr>
      </thead>
      <tbody>
      <tr
        v-for="row in showData"
        v-bind:key="row.id"
        :class="{'weeks' : weekTh}">
        <td v-for="item in row" v-bind:key="item.id">
         {{item}}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script scoped>
export default{
  props: {
    tableData: Object,
    maxItem: Number,
    weekTh: {
      type: Boolean,
      default: false
    },
    hasTotal: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showData: function ({maxItem = 6}) {
      if (this.maxItem) {
        return this.tableData.tbody.slice(0, this.maxItem)
      } else {
        return this.tableData.tbody.slice(0, maxItem)
      }
    }
  }
}
</script>

<style scoped></style>
